<template>
    <div id="app">
        <h1>题目考察</h1>
        <hr/>
        <h2 style="color: red">说明：以自己的名字命名代码分支，并将代码传到git上，注意不要往master分支上上传</h2>
        <hr/>
        <HelloWorld msg="Welcome to Your Vue.js App"/>
        <h2>第二题：请根据当前操作修改进行监听v-model的值，使其发生变化：{{value}}</h2>
        <input v-model="value"/>
        <hr/>

        <h2>第三题：请在下方画一个正方形，已知宽度是屏幕的20%</h2>
        <div id="squeare" style="width: 20%"></div>
        <hr/>

        <h2>第四题：请查看getData()函数， 函数内部可能出现很多回调，axios请求回来的数据，需要传递给下一个回调函数，请进行优化</h2>
        <div></div>

        <h2>第五题：怎么遍历js对象？如何合并两个js对象？</h2>
        <div></div>
        <div>答案：for in、 Object.keys()、Object.getOwnPropertyNames、Reflect.ownKeys[不常用] 遍历</div>
        <div>答案：Object.assign(form, obj)、...[三个点扩展运算符]、遍历合并
            <img src="./assets/kz.png" alt="" id="kz">
        </div>

        <h2>第六题：请说出下面代码执行顺序？为什么？</h2>
        <div><img src="./assets/dm.png" alt="" id="dm"></div>
        <div>答案：依序输出：1、3、7、5、2、4、6</div>
        <div>答案：同步代码>异步代码[微]>异步代码[宏] console.log>promise>setTimeout【执行顺序】</div>

        <h2>第七题：说明vuex有哪些东西？页面刷新vuex被清空解决办法？</h2>
        <div>答案：
            state => 基本数据 
            getters => 从基本数据派生的数据 
            mutations => 提交更改数据的方法，同步！ 
            actions => 像一个装饰器，包裹mutations，使之可以异步。 actions可以直接修改 state里面的状态吗？ 【不可以】
            modules => 模块化Vuex
        </div>
        <div>答案：localStorage 存储、vuex-persistedstate[vuex持久化存储插件]、父组件包含子组件，父组件对子组件用v-if控制、等vuex数据存储完毕、才打开子组件</div>

        <h2>第八题：vue如何进行组件缓存？组件被缓存后、生命周期钩子函数有何变化？</h2>
        <div>答案：keep-alive抽象组件</div>
        <div>答案：生命周期钩子函数中、只有activated、deactivated会触发 其余钩子函数不会被触发</div>

        <h2>第九题：vue路由模式有那两种？它们的区别有哪些？history模式访问的资源不存在会出现什么问题?</h2>
        <div>答案：hash模式、history模式</div>
        <div>答案：
            hash 原理 window.onhashchange  利用浏览器不会解析#后的参数
            history原理 HashHistory.push() HashHistory.replace() 
            history 模式 可以支持浏览器前进后退
            url地址表现：https://www.baidu.com/market/  [history] https://www.baidu.com/#/market   [hast]
        </div>
        <div>答案：会出现404页面、
            需要在路由模块配置一个404页面、
            {path: '*', redirect: '/404'}
            然后由后端重定向到404页面、
        </div>

        <h2>第十题：vue中如何监听数据的变化？有什么区别</h2>
        <div>答案：computed属性和watch</div>
        <div>答案：
            computed里属性名是自定义的、computed自定义的属性不能与Data属性重复、否则报错
            watch里监听的属性必须是已存在的 watch能够监听computed
            computed 能监听多个属性 他可以是一个对象  watch 只能监听一个属性
            执行顺序上 computed 比 watch 先执行
        </div>

        <h2>第十一题：如何修改webpack配置能够让项目 www.123.com访问地址变成  www.123.com/project</h2>
        <div>答案：
            修改config.js 中 build对象中assetsPublicPath 由 '/' 变成  '/project' 然后把项目代码放到服务器根目录下project目录里面进行访问
        </div>
    </div>
</template>

<script>
    import HelloWorld from './components/HelloWorld.vue'

    export default {
        name: 'app',
        components: {
            HelloWorld
        },
        computed: {
            value() {
                return this.$store.getters.value
            }
        },
        methods: {
            getData () {
                // 可能出现很多回调，axios请求回来的数据，需要传递给下一个回调函数，请进行优化
                axios(url, () => {
                    axios(url1, () => {
                        axios(url2, () => {
                            axios(url3, () => {

                            })
                        })
                    })
                })
            },
        },
    }
</script>

<style>
    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }

    #squeare {
        width: 20%;
    }
    #kz{
        width: 188px;
        height: 98px;
        display: block;
        margin: 0 auto;
    }
    #dm{
        width: 289px;
        height: 257px;
        display: block;
        margin: 0 auto;
    }
</style>
